<style scoped>
  .el-button{
    width: 100px;
  }
  .right-panel{
    overflow: hidden;
    display: none;
    width: 360px;
    /*height: 40px;*/
    background: white;
    border: 1px solid #4488b0;
    border-radius: 5px;
    position: absolute;
    right: 48px;
    top: 45px;
  }
  .picture{
    width: 360px;
    height: 198px;
    background-image: url("../../../static/image/picture/picture01.jpg");
    background-size:100% 100%;
    /*border-radius: 5px;*/
  }
  .title{
    width: 100%;
    position: relative;
    height: 60px;
  }
  .title .navigation{
    background-color: #3a8ee6;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: white;
    font-size: 12px;
    text-align: center;
    /*line-height: 54px;*/
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

  }
  .name{
    padding: 6px 0;
    text-indent: 10px;
    font-size: 15px;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .type{
    font-size: 12px;
    line-height: 1.5;
    margin-left: 10px;
    color: #939392;
  }
  .placeinfo{
    height: 53px;
  }
  .placeinfo:after{
    content: "";
    display: block;
    height: 1px;
    margin-top: 5px;
    margin-left: 15px;
    width: calc(100% - 15px);
    background: #f4f4f4;
  }
  .icon{
    padding-left: 12px;
    padding-right: 12px;

  }
  span{
    color: rgb(51, 51, 51);
    font-size: 12px;
    line-height: 24px;
  }
  .menus{
    /*background-color: #2c3e50;*/
    height: 38px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    color: #0e89f5;
    font-size: 12px;
    line-height: 18px;
  }
  .menus >div{
    display: flex;
    align-items: center;
  }
  @keyframes fade-in {
    0% {opacity: 0; right: 48px;height: 40px;}/*初始状态 透明度为0*/
    /*50% {opacity: 0.5;  right: 0px;}!*过渡状态 透明度为0*!*/
    100% {opacity: 1;  right: 48px;height: 520px;}/*结束状态 透明度为1*/
  }
  @-webkit-keyframes fade-in {/*针对webkit内核*/
    0% {opacity: 0;}
    50% {opacity: 0;}
    100% {opacity: 1;}
  }
  .fade{
    display: block;
    animation: fade-in;/*动画名称*/
    animation-duration: 0.2s;/*动画持续时间*/
    -webkit-animation:fade-in 0.2s;/*针对webkit内核*/
    height: 520px;
  }
</style>
<template>
<div style="">
  <div class="wrapper" style="position: absolute; z-index: 200;top: 14px;width: auto;left: 200px">
    <div class="selectModelType" >
      <div class="tip"><p>右侧弹出窗</p></div>
      <el-button type="primary" size="mini" @click="test()">右侧弹窗</el-button>
    </div>
  </div>
  <div class="right-panel">
    <div class="picture"></div>
    <div class="title">
      <div class="navigation">
        <svg t="1606565921554" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20141" width="24" height="24"><path d="M700.8 300.8h166.4L617.6 0l-252.8 300.8h169.6v217.6H156.8V1024h166.4V691.2h377.6V300.8z" fill="#ffffff" p-id="20142"></path></svg>
        去这里
      </div>
      <div class="name">聚光科技</div>
      <div class="type">工业园区</div>
    </div>
    <div class="placeinfo">
      <div style="display: flex;align-items: center">
        <svg t="1606564054313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2968" width="18" height="18"><path d="M923.63904 424.82944c0-231.85792-184.29568-419.80544-411.64416-419.80544-227.34208 0-411.63904 187.94752-411.63904 419.80544 0 7.35872 0.7104 14.47168 1.08288 21.67552-0.33792 3.5584-1.08288 6.99008-1.08288 10.64192 0 258.38592 379.97952 551.06688 379.97952 551.06688s31.66336 24.21504 63.328 0c31.66336-24.24192 379.97952-292.68096 379.97952-551.06688 0-3.65184-0.74496-7.08352-1.08288-10.64192C922.92864 439.30112 923.63904 432.18816 923.63904 424.82944L923.63904 424.82944zM511.99488 586.336c-87.44832 0-158.31936-72.29312-158.31936-161.50656 0-89.15072 70.86976-161.4464 158.31936-161.4464 87.45344 0 158.32832 72.29568 158.32832 161.4464C670.3232 514.04288 599.44832 586.336 511.99488 586.336L511.99488 586.336zM511.99488 586.336" p-id="2969" fill="#939392"></path></svg>
        <span>杭州市滨江区滨安路760号</span>
      </div>
      <div style="display: flex;align-items: center">
        <svg t="1605660551897" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3715" width="18" height="18"><path d="M399.36 335.872c0 0-3.072 58.368-84.992 102.4 0 0 111.616 219.136 310.272 301.056 0 0 78.848-88.064 102.4-81.92l234.496 102.4c0 0 17.408 97.28-149.504 161.792s-332.8-63.488-507.904-265.216S98.304 260.096 145.408 157.696 296.96 90.112 296.96 90.112L399.36 335.872z" p-id="3716" fill="#939392"></path></svg>
        <span>0571-85012188</span>
      </div>
    </div>
    <div class="menus">
      <div>
        <svg t="1606565209982" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3904" width="18" height="18"><path d="M1003.52 390.826667c-6.826667-20.48-23.893333-34.133333-44.373333-37.546667l-273.066667-42.666667L563.2 49.493333C554.666667 29.013333 534.186667 17.066667 512 17.066667s-40.96 11.946667-51.2 32.426666l-122.88 261.12-273.066667 40.96c-20.48 3.413333-37.546667 17.066667-44.373333 37.546667-6.826667 20.48-1.706667 42.666667 13.653333 56.32l199.68 204.8L186.026667 938.666667c-3.413333 20.48 5.12 42.666667 23.893333 54.613333 17.066667 11.946667 40.96 13.653333 59.733333 3.413333L512 865.28l244.053333 136.533333c8.533333 3.413333 17.066667 6.826667 25.6 6.826667 30.72 0 56.32-25.6 56.32-56.32 0-6.826667-1.706667-11.946667-3.413333-17.066667l-44.373333-279.893333 199.68-204.8c15.36-17.066667 20.48-39.253333 13.653333-59.733333z" fill="#0d89f5" p-id="3905"></path></svg>
        收藏
      </div>
      <div>
        <svg t="1606565430499" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4898" width="18" height="18"><path d="M493.049019 822.785403c3.365173 3.995052 8.794239 6.82879 18.725477 6.82879h0.468528c12.173627 0 16.364319-4.473493 20.169403-9.244063 46.789221-58.528734 204.011364-259.153478 262.979947-368.44217 24.103045-44.669591 33.93428-84.311435 33.93428-136.925492 0-173.730793-142.447453-315.00253-317.552158-315.00253-175.099032 0-317.547857 140.629078-317.547857 313.295691 0 45.600849 10.641044 92.964336 30.766244 136.405591 53.19381 114.819132 245.817041 346.560129 268.056136 373.084183zM511.780107 49.098693c148.15508 0 268.693309 119.338573 268.693309 266.020923 0 44.379621-7.872956 76.254185-28.075278 113.65364-49.523018 91.820292-178.502672 260.803208-231.65228 329.190235l-9.434155 12.140771-9.697005-11.922249c-56.140456-69.062668-191.167646-239.285329-232.305039-328.070381-17.162843-37.058113-26.228473-77.28557-26.228473-116.336128 0-148.423603 118.020086-264.676811 268.698921-264.676811z m0 0" fill="#0e89f5" p-id="4899"></path><path d="M787.905027 642.972847c-2.912418-1.155453-5.953269-1.741129-9.044246-1.741129-10.076815 0-18.986767 6.026089-22.707622 15.387424-2.422381 6.059007-2.32668 12.687854 0.238597 18.691124 2.57812 5.987559 7.337344 10.612552 13.396288 13.033561 80.533471 32.110293 126.714322 76.087161 126.714322 120.655377 0 79.579457-154.588223 164.77645-384.722322 164.776451S127.056475 888.578599 127.056475 808.999142c0-43.162757 43.865455-86.185485 120.342589-118.038665 6.026151-2.51671 10.712492-7.218762 13.194912-13.256385 2.48959-6.031824 2.478118-12.664973-0.02712-18.685388-3.816556-9.139883-12.676445-15.053126-22.586174-15.053126-3.208062 0-6.360386 0.629879-9.351298 1.885335-97.003653 40.406078-150.426023 98.349136-150.426022 163.148229 0 121.786578 186.397138 213.629626 433.576807 213.629626 247.17836 0 433.575498-91.843048 433.575498-213.629626-0.000062-65.597492-57.394603-126.117299-157.45064-166.026295z m0 0M511.780107 411.95612c53.873877 0 97.706352-43.831228 97.706351-97.706414 0-53.875187-43.832537-97.70629-97.706351-97.70629-53.875187 0-97.707786 43.831103-97.707786 97.70629 0 53.875249 43.832599 97.706414 97.707786 97.706414z m0 0" fill="#0e89f5" p-id="4900"></path></svg>
        搜周边
      </div>
      <div>
        <svg t="1606565608570" class="icon" viewBox="0 0 1097 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17775" width="18" height="18"><path d="M617.179429 295.350857V124.562286A31.963429 31.963429 0 0 0 585.142857 92.598857H136.923429a31.963429 31.963429 0 0 0-31.963429 31.963429V893.805714c0 17.627429 14.262857 31.963429 31.963429 31.963429H585.142857a31.963429 31.963429 0 0 0 32.036572-31.963429V730.843429a41.106286 41.106286 0 1 1 82.212571 0v162.889142c0 63.122286-51.2 114.249143-114.249143 114.249143H136.923429c-63.122286 0-114.249143-51.2-114.249143-114.249143V124.562286C22.674286 61.44 73.874286 10.313143 136.923429 10.313143H585.142857c63.122286 0 114.322286 51.2 114.322286 114.249143v170.788571a41.106286 41.106286 0 1 1-82.358857 0z m160.182857-1.024c16.091429-16.091429 42.130286-16.091429 58.221714 0L1013.028571 471.771429a52.589714 52.589714 0 0 1-0.877714 75.190857l-176.566857 176.566857a41.179429 41.179429 0 0 1-58.221714-58.221714l115.126857-115.053715H326.436571a41.179429 41.179429 0 0 1-41.106285-40.448v-0.731428c0-22.674286 18.432-41.106286 41.106285-41.106286h566.418286L777.362286 352.548571a41.106286 41.106286 0 0 1-0.438857-57.782857l0.438857-0.438857z" p-id="17776" fill="#0e89f5"></path></svg>
        发送到手机
      </div>
    </div>
    <div style="height: 10px;background-color: #f5f5f5"></div>
  </div>
</div>
</template>

<script>
  // import 'element-ui/lib/theme-chalk/base.css';
  // import {eventBus, Gisevevts} from "../../script/events";
  // import {getDbData } from "../../script/data-management";
  // import CustomPopup from "../widget/related-jsFile/customPopup";
  // import Vue from "vue";
  // import CreateMarker_pop from "../widget/CreateMarker_pop";
  // import BoundaryMask from '../../script/BoundaryMask.js'

  export default {
    name: "test",
    data() {
      return {

      }
    },
    components: {
    },
    created() {//页面渲染前，即通常初始化某些属性值，然后再渲染成视图
    },
    mounted() {//页面渲染完成后，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

    },
    watch:{
    },
    methods: {
      test(){
        let flag = $(".right-panel").hasClass("fade")
        if (!flag){
          $('.right-panel').addClass("fade")
        }else {
          $('.right-panel').removeClass("fade")
        }
      }

    },
    destroyed() {
    },
  }
</script>


